<template>
  <div class="mysinger-container">
    <div class="mysinger-header">
      <span
        >我的歌手<span>（{{ mySinger.length }}）</span></span
      >
    </div>
    <div class="mysinger-split"></div>
    <div class="mysinger-item" v-for="singer in mySinger" :key="singer.id">
      <router-link :to="{ path: '/artist', query: { id: singer.id } }">
        <img v-lazy="singer.picUrl" alt=""
      /></router-link>
      <div>
        <p class="singer-name">{{ singer.name }}</p>
        <p class="singer-al-mv">
          <span>{{ singer.albumSize }}个专辑</span>&nbsp;
          <span>{{ singer.mvSize }}个MV</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "mySinger",
};
</script>

<script lang="ts" setup>
import { getMySingerApi } from "@/api/myMusic/mySinger";
import { ref, onMounted } from "vue";

/*****************获取我的歌手*****************/
const mySinger = ref<any>([]);

const getMySinger = async () => {
  const res = await getMySingerApi();
  mySinger.value = res.data;
};

onMounted(() => {
  getMySinger();
  console.log(1111);
});
</script>

<style scoped>
.mysinger-container {
  width: 750px;
  border: 1px solid #d3d3d3;
}
.mysinger-header {
  font-size: 24px;
  padding: 10px;
}
.mysinger-split {
  width: 100%;
  height: 1px;
  background: #000;
  margin: 5px 0;
}
.mysinger-item {
  display: flex;
  align-items: center;
  padding: 10px;
}
.mysinger-item img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
.mysinger-item .singer-name {
  font-size: 18px;
  font-weight: bold;
}
.mysinger-item .singer-al-mv {
  font-size: 12px;
  color: gray;
}
</style>
